<html>
<head>
  <title>Electron</title>
  <style>
    body {
      color: #45828E;
      background-color: #A5ECFA;
      font-family: 'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif;
      padding: 0;
      margin: 0;
    }

    .container {
      padding: 15px 30px;
    }

    h2 {
      background-color: #76C7D7;
      color: #FAF7F3;
      font-weight: 400;
      padding: 15px 30px;
      margin: 0;
    }

    a {
      color: #39AEC6;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    pre, code {
      font-family: "Menlo","Lucida Console",monospace;
      border: 1px solid #076274;
      background-color: #076274;
      color: #C5F3FC;
      border-radius: 3px;
    }

    pre {
      white-space: pre-wrap;
      font-size: 13px;
      line-height: 19px;
      overflow: auto;
      padding: 6px 10px;
    }

    code {
      padding: 1px 4px 1px 4px;
      font-size: 13px;
    }

    #holder {
      border: 2px dashed #448691;
      margin: 0 auto;
      height: 300px;
      color: #45828E;
      font-size: 40px;
      line-height: 300px;
      text-align: center;
      -webkit-user-select: none;
    }

    #holder.hover {
      background-color: #7BDCEF;
    }
  </style>
</head>
<body>
  <script>
    const electron = require('electron');
    const remote = electron.remote;
    const shell = electron.shell;

    var execPath = remote.process.execPath;
    var command = execPath + ' path-to-your-app';

    document.onclick = function(e) {
      e.preventDefault();
      if (e.target.tagName == 'A')
        shell.openExternal(e.target.href);
      return false;
    };
    document.ondragover = document.ondrop = function(e) {
      e.preventDefault();
      return false;
    };
  </script>

  <h2>
    <script>
      document.write(`Welcome to Electron ${process.versions.electron}`)
    </script>
  </h2>

  <div class="container">

    <p>
    To run your app with Electron, execute the following command in your
    Console (or Terminal):
    </p>

    <script>document.write('<pre>' + command + '</pre>')</script>

    <p>
    The <code>path-to-your-app</code> should be the path to your own Electron
    app.
    </p>

    <p>You can read the
    <script>
      document.write(
        `<a href='https://github.com/atom/electron/blob/v${process.versions.electron}/docs/tutorial/quick-start.md'>quick start</a>`
      );
    </script>
    guide in Electron's
    <script>
      document.write(
        `<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
      );
    </script>
    to learn how to write one.
    </p>

    <p>
    Or you can just drag your app here to run it:
    </p>

    <div id="holder">
      Drag your app here to run it
    </div>

  </div>

  <script>
    var holder = document.getElementById('holder');
    holder.ondragover = function () {
      this.className = 'hover';
      return false;
    };
    holder.ondragleave = holder.ondragend = function () {
      this.className = '';
      return false;
    };
    holder.ondrop = function (e) {
      this.className = '';
      e.preventDefault();

      var file = e.dataTransfer.files[0];
      require('child_process').execFile(execPath, [file.path], {
        detached: true, stdio: 'ignore'
      }).unref();
      return false;
    };
  </script>
</body>
</html>
